.membership {
  .action-set {
    flex: 1 1 auto;
    @media(min-width: @screen-xs-min) {
      max-width: 65%;
      .container-pf-nav-pf-vertical.collapsed-nav & {
        max-width: 60%;
      }
    }
  }
  .content-pane {
    .add-role-to {
      margin-left: -1px;
    }
    .col-add-role-inputs {
      display: flex;
    }
    .col-heading {
      border-bottom: 1px solid #ededed;
      display: none;
      @media(min-width: @screen-xs-min) {
        display: flex;
      }
    }
    .col-name {
      align-items: center;
      display: flex;
      flex: 1 1 auto;
      padding: 0 0 10px 0;
      .word-break-all;
      @media(min-width: @screen-xs-min) {
        max-width: 35%;
        padding: 0 5px 0 0;
        width: 100%;
        .container-pf-nav-pf-vertical.collapsed-nav & {
          max-width: 40%;
        }
        input {
          max-width: 225px;
        }
      }
    }
    .col-roles {
      display: flex;
      flex-wrap: wrap;
      padding-bottom: 5px;
    }
    .item-row {
      border-bottom: 1px solid #ededed;
      display: flex;
      flex-direction: column;
      padding: 10px 0;
      @media(min-width: @screen-xs-min) {
        flex-direction: row;
        &.highlight-hover:hover {
          background-color: #fafafa;
        }
      }
    }
    .membership-empty {
      margin-top: 20px;
    }
    .show-hidden-roles {
      text-align: right;
    }
    .select-role {
      flex: 1 1 auto;
      .active {
        small {
          color: #c0e0f0;
        }
      }
      small {
        color: #999;
        display: inline-block;
        line-height: 1.4;
        white-space: pre-line;
      }
    }
    .service-account {
      flex-wrap: wrap;
      margin-bottom: -5px;
      .select-project,
      .select-service-account {
        margin-bottom: 5px;
      }
    }
  }
  // allow for taller select due to role help text
  .ui-select-bootstrap > .ui-select-choices {
    max-height: 300px;
  }
}
